<template>
  <div class="box">
    <header class="header">
      <div class="top">
        <p>
          <van-icon name="location-o" />碧桂园凤凰城<van-icon
            name="arrow-down"
          />
        </p>
        <p><van-icon name="envelop-o" /></p>
      </div>
     
     <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        style="border-radius: 15px;width:100%;"
        class="sc"
        @click-input="$router.push('/search')"
      />
  

     
      <ul class="tag">
        <li>鸡蛋</li>
        <li>鸡蛋</li>
        <li>鸡蛋</li>

        <li>鸡蛋</li>
        <li>草莓</li>
        <li>鸡蛋</li>
      </ul>
    </header>
    <main class="content">
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item>
          <van-grid>
            <van-grid-item :icon="require('@/img/2.png')" text="电器" />
            <van-grid-item :icon="require('@/img/3.png')" text="书法" />
            <van-grid-item :icon="require('@/img/4.png')" text="水果" />
            <van-grid-item :icon="require('@/img/5.png')" text="糖果" />
          </van-grid>
          <van-grid>
            <van-grid-item :icon="require('@/img/2.png')" text="电器1" />
            <van-grid-item :icon="require('@/img/3.png')" text="书法1" />
            <van-grid-item :icon="require('@/img/4.png')" text="水果1" />
            <van-grid-item :icon="require('@/img/5.png')" text="糖果1" />
          </van-grid>
        </van-swipe-item>

        <van-swipe-item>
          <van-grid>
            <van-grid-item :icon="require('@/img/2.png')" text="电器2" />
            <van-grid-item :icon="require('@/img/3.png')" text="书法2" />
            <van-grid-item :icon="require('@/img/4.png')" text="水果2" />
            <van-grid-item :icon="require('@/img/5.png')" text="糖果2" />
          </van-grid>
          <van-grid>
            <van-grid-item :icon="require('@/img/2.png')" text="电器3" />
            <van-grid-item :icon="require('@/img/3.png')" text="书法3" />
            <van-grid-item :icon="require('@/img/4.png')" text="水果3" />
            <van-grid-item :icon="require('@/img/5.png')" text="糖果3" />
          </van-grid>
        </van-swipe-item>
      </van-swipe>
     <div class="boxb">
      <div class="text">
        <div class="top2">
          <p>一公里商家</p>
          <p @click="$router.push('/list')">更多<van-icon name="arrow"  /></p>
        </div>
        <van-grid>
          <van-grid-item :icon="require('@/img/6.jpg')" text="天虹" />
          <van-grid-item :icon="require('@/img/7.jpg')" text="永辉" />
          <van-grid-item :icon="require('@/img/6.jpg')" text="大润" />
          <van-grid-item :icon="require('@/img/7.jpg')" text="吃饭" />
        </van-grid>
        <ul class="tag2">
          <li>超市100m内</li>
          <li>超市30m内</li>
          <li>超市110m内</li>
          <li>超市200m内</li>
        </ul>
      </div>
      <div class="text2">
        <van-tabs v-model:active="active">
          <van-tab title="人物推荐"></van-tab>
          <van-tab title="新品尝鲜"></van-tab>
          <van-tab title="新品尝鲜3"></van-tab>
          <van-tab title="新品尝鲜4"></van-tab>
        </van-tabs>
        <ul class="tag3">
          <li>新品抢购</li>
          <li>新品抢购2</li>
          <li>新品抢购3</li>
          <li>新品抢购4</li>
        </ul>
      </div>
      <div class="text3">
        <img src="@/img/8.jpg" alt="" />
        <img src="@/img/9.jpg" alt="" />
      </div>
      
</div>

    <list/>
    </main>
  
  </div>
    
</template>

<script setup>
import list from './components/list.vue'
</script>

<style lang="scss" scoped>
.sc{
  position: sticky;
  top: 0;
  z-index: 9999999;
}
</style>

